10 Fashion visual search - Gradio App.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "9c6d52d2",
   "metadata": {},
   "source": [
    "# Azure Computer Vision 4 (Florence)\n",
    "\n",
    "## Fashion Visual Search - Gradio App\n",
    "\n",
    "![Image](florence.jpg)\n",
    "\n",
    "![Image](fashionheader.png)\n",
    "\n",
    "<br>\n",
    "<i>Note: this image was generated with Azure Open AI Dall-e 2</i>\n",
    "\n",
    "### Visual search with vector embeddings\n",
    "**Vector embeddings** are a way of representing content such as text or images as vectors of real numbers in a high-dimensional space. These embeddings are often learned from large amounts of textual and visual data using machine learning algorithms like neural networks. Each dimension of the vector corresponds to a different feature or attribute of the content, such as its semantic meaning, syntactic role, or context in which it commonly appears. By representing content as vectors, we can perform mathematical operations on them to compare their similarity or use them as inputs to machine learning models.\n",
    "\n",
    "![Image](embeddings.jpg)\n",
    "\n",
    "\n",
    "### Business applications\n",
    "- **Digital asset management**: Image retrieval can be used to manage large collections of digital images, such as in museums, archives, or online galleries. Users can search for images based on visual features and retrieve the images that match their criteria.\n",
    "- **Medical image retrieval**: Image retrieval can be used in medical imaging to search for images based on their diagnostic features or disease patterns. This can help doctors or researchers to identify similar cases or track disease progression.\n",
    "- **Security and surveillance**: Image retrieval can be used in security and surveillance systems to search for images based on specific features or patterns, such as in, people & object tracking, or threat detection.\n",
    "- **Forensic image retrieval**: Image retrieval can be used in forensic investigations to search for images based on their visual content or metadata, such as in cases of cyber-crime.\n",
    "- **E-commerce**: Image retrieval can be used in online shopping applications to search for similar products based on their features or descriptions or provide recommendations based on previous purchases.\n",
    "- **Fashion and design**: Image retrieval can be used in fashion and design to search for images based on their visual features, such as color, pattern, or texture. This can help designers or retailers to identify similar products or trends.\n",
    "\n",
    "### Visual Search Process\n",
    "![Image](fashionprocess.png)\n",
    "\n",
    "### Image Retrieval with Azure Computer Vision Documentation\n",
    "- https://learn.microsoft.com/en-us/azure/cognitive-services/computer-vision/concept-image-retrieval\n",
    "- https://learn.microsoft.com/en-us/azure/cognitive-services/computer-vision/how-to/image-retrieval\n",
    "\n",
    "### Demo images\n",
    "Demo images are a sample of this collection of images: https://www.kaggle.com/competitions/h-and-m-personalized-fashion-recommendations/data\n",
    "<br><br>\n",
    "> Serge Retkowsky | Microsoft | https://github.com/retkowsky | 3rd of May, 2023"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9ebb0cb4",
   "metadata": {},
   "source": [
    "## 1. <a name=\"chapt1\"></a> Librairies"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "71b8f060",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 1;\n",
       "                var nbb_unformatted_code = \"%load_ext nb_black\";\n",
       "                var nbb_formatted_code = \"%load_ext nb_black\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%load_ext nb_black"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "4bb13529",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 2;\n",
       "                var nbb_unformatted_code = \"import datetime\\nimport glob\\nimport gradio as gr\\nimport json\\nimport os\\nimport pandas as pd\\nimport requests\\nimport sys\\nimport time\\n\\nfrom PIL import Image\";\n",
       "                var nbb_formatted_code = \"import datetime\\nimport glob\\nimport gradio as gr\\nimport json\\nimport os\\nimport pandas as pd\\nimport requests\\nimport sys\\nimport time\\n\\nfrom PIL import Image\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import datetime\n",
    "import glob\n",
    "import gradio as gr\n",
    "import json\n",
    "import os\n",
    "import pandas as pd\n",
    "import requests\n",
    "import sys\n",
    "import time\n",
    "\n",
    "from PIL import Image"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "5cac7df5",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 3;\n",
       "                var nbb_unformatted_code = \"# Getting Azure CV endpoint and key from the azure.env file\\nfrom dotenv import load_dotenv\\n\\nload_dotenv(\\\"azure.env\\\")\\nkey = os.getenv(\\\"azure_cv_key\\\")\\nendpoint = os.getenv(\\\"azure_cv_endpoint\\\")\";\n",
       "                var nbb_formatted_code = \"# Getting Azure CV endpoint and key from the azure.env file\\nfrom dotenv import load_dotenv\\n\\nload_dotenv(\\\"azure.env\\\")\\nkey = os.getenv(\\\"azure_cv_key\\\")\\nendpoint = os.getenv(\\\"azure_cv_endpoint\\\")\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Getting Azure CV endpoint and key from the azure.env file\n",
    "from dotenv import load_dotenv\n",
    "\n",
    "load_dotenv(\"azure.env\")\n",
    "key = os.getenv(\"azure_cv_key\")\n",
    "endpoint = os.getenv(\"azure_cv_endpoint\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bdc50670",
   "metadata": {},
   "source": [
    "### Importing our specific functions"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "404e371f",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Python file: azure.py Date: Wed May  3 12:39:04 2023\n"
     ]
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 4;\n",
       "                var nbb_unformatted_code = \"pyfile = \\\"azure.py\\\"\\n\\nprint(\\\"Python file:\\\", pyfile,\\n      \\\"Date:\\\", time.ctime(os.path.getmtime(pyfile)))\";\n",
       "                var nbb_formatted_code = \"pyfile = \\\"azure.py\\\"\\n\\nprint(\\\"Python file:\\\", pyfile, \\\"Date:\\\", time.ctime(os.path.getmtime(pyfile)))\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "pyfile = \"azure.py\"\n",
    "\n",
    "print(\"Python file:\", pyfile, \"Date:\", time.ctime(os.path.getmtime(pyfile)))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "a800ed7c",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 5;\n",
       "                var nbb_unformatted_code = \"from azure import (get_cosine_similarity,\\n                   image_embedding,\\n                   text_embedding,\\n                   remove_background\\n                  )\";\n",
       "                var nbb_formatted_code = \"from azure import (\\n    get_cosine_similarity,\\n    image_embedding,\\n    text_embedding,\\n    remove_background,\\n)\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from azure import (\n",
    "    get_cosine_similarity,\n",
    "    image_embedding,\n",
    "    text_embedding,\n",
    "    remove_background,\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "10fd6a08",
   "metadata": {},
   "source": [
    "## 2. <a name=\"chapt2\"></a> Informations"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "87e9c307",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'3.8.5 (default, Sep  4 2020, 07:30:14) \\n[GCC 7.3.0]'"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 6;\n",
       "                var nbb_unformatted_code = \"sys.version\";\n",
       "                var nbb_formatted_code = \"sys.version\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "sys.version"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "78e6b097",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Today is 2023-05-04 07:48:03.008533\n"
     ]
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 7;\n",
       "                var nbb_unformatted_code = \"print(\\\"Today is\\\", datetime.datetime.today())\";\n",
       "                var nbb_formatted_code = \"print(\\\"Today is\\\", datetime.datetime.today())\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "print(\"Today is\", datetime.datetime.today())"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "395e3c5c",
   "metadata": {},
   "source": [
    "## 3. <a name=\"chapt3\"></a> Our products images"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "a9e90893",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 8;\n",
       "                var nbb_unformatted_code = \"IMAGES_DIR = \\\"fashion\\\"\";\n",
       "                var nbb_formatted_code = \"IMAGES_DIR = \\\"fashion\\\"\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "IMAGES_DIR = \"fashion\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "77de30d4",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Directory of images: fashion\n",
      "Total number of catalog images = 1,473\n"
     ]
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 9;\n",
       "                var nbb_unformatted_code = \"image_files = glob.glob(IMAGES_DIR + \\\"/*\\\")\\n\\nprint(\\\"Directory of images:\\\", IMAGES_DIR)\\nprint(\\\"Total number of catalog images =\\\", \\\"{:,}\\\".format(len(image_files)))\";\n",
       "                var nbb_formatted_code = \"image_files = glob.glob(IMAGES_DIR + \\\"/*\\\")\\n\\nprint(\\\"Directory of images:\\\", IMAGES_DIR)\\nprint(\\\"Total number of catalog images =\\\", \\\"{:,}\\\".format(len(image_files)))\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "image_files = glob.glob(IMAGES_DIR + \"/*\")\n",
    "\n",
    "print(\"Directory of images:\", IMAGES_DIR)\n",
    "print(\"Total number of catalog images =\", \"{:,}\".format(len(image_files)))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ec0c3ece",
   "metadata": {},
   "source": [
    "## 4. <a name=\"chapt4\"></a> Loading vector embeddings"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "e45aa4e4",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "['json/img_embed_03May2023_143839.json']"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 10;\n",
       "                var nbb_unformatted_code = \"JSON_DIR = \\\"json\\\"\\n\\nglob.glob(JSON_DIR + \\\"/*.json\\\")\";\n",
       "                var nbb_formatted_code = \"JSON_DIR = \\\"json\\\"\\n\\nglob.glob(JSON_DIR + \\\"/*.json\\\")\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "JSON_DIR = \"json\"\n",
    "\n",
    "glob.glob(JSON_DIR + \"/*.json\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "id": "6dddea6b",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Importing vectors embeddings...\n",
      "Loading the most recent file of the vector embeddings: json/img_embed_03May2023_143839.json\n",
      "\n",
      "Done: number of imported vector embeddings = 1,473\n"
     ]
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 11;\n",
       "                var nbb_unformatted_code = \"print(\\\"Importing vectors embeddings...\\\")\\n\\njsonfiles = [entry.name for entry in os.scandir(JSON_DIR) if entry.is_file()]\\njsonfiles = [f for f in jsonfiles if os.path.isfile(os.path.join(JSON_DIR, f))]\\n\\n# Get the most recent file\\nmodification_times = [(f, os.path.getmtime(os.path.join(JSON_DIR, f)))\\n                      for f in jsonfiles]\\nmodification_times.sort(key=lambda x: x[1], reverse=True)\\nmost_recent_file = JSON_DIR + '/' + modification_times[0][0]\\n\\n# Loading the most recent file\\nprint(\\n    f\\\"Loading the most recent file of the vector embeddings: {most_recent_file}\\\"\\n)\\n\\nwith open(most_recent_file) as f:\\n    list_emb = json.load(f)\\n\\nprint(f\\\"\\\\nDone: number of imported vector embeddings = {len(list_emb):,}\\\")\";\n",
       "                var nbb_formatted_code = \"print(\\\"Importing vectors embeddings...\\\")\\n\\njsonfiles = [entry.name for entry in os.scandir(JSON_DIR) if entry.is_file()]\\njsonfiles = [f for f in jsonfiles if os.path.isfile(os.path.join(JSON_DIR, f))]\\n\\n# Get the most recent file\\nmodification_times = [\\n    (f, os.path.getmtime(os.path.join(JSON_DIR, f))) for f in jsonfiles\\n]\\nmodification_times.sort(key=lambda x: x[1], reverse=True)\\nmost_recent_file = JSON_DIR + \\\"/\\\" + modification_times[0][0]\\n\\n# Loading the most recent file\\nprint(f\\\"Loading the most recent file of the vector embeddings: {most_recent_file}\\\")\\n\\nwith open(most_recent_file) as f:\\n    list_emb = json.load(f)\\n\\nprint(f\\\"\\\\nDone: number of imported vector embeddings = {len(list_emb):,}\\\")\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "print(\"Importing vectors embeddings...\")\n",
    "\n",
    "jsonfiles = [entry.name for entry in os.scandir(JSON_DIR) if entry.is_file()]\n",
    "jsonfiles = [f for f in jsonfiles if os.path.isfile(os.path.join(JSON_DIR, f))]\n",
    "\n",
    "# Get the most recent file\n",
    "modification_times = [\n",
    "    (f, os.path.getmtime(os.path.join(JSON_DIR, f))) for f in jsonfiles\n",
    "]\n",
    "modification_times.sort(key=lambda x: x[1], reverse=True)\n",
    "most_recent_file = JSON_DIR + \"/\" + modification_times[0][0]\n",
    "\n",
    "# Loading the most recent file\n",
    "print(f\"Loading the most recent file of the vector embeddings: {most_recent_file}\")\n",
    "\n",
    "with open(most_recent_file) as f:\n",
    "    list_emb = json.load(f)\n",
    "\n",
    "print(f\"\\nDone: number of imported vector embeddings = {len(list_emb):,}\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c9de180a",
   "metadata": {},
   "source": [
    "## 5. <a name=\"chapt5\"></a> Gradio webapp"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e52b482d",
   "metadata": {},
   "source": [
    "### Generic gradio elements"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "id": "023f159e",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 12;\n",
       "                var nbb_unformatted_code = \"footnote = \\\"Powered by Azure Computer Vision 4 (Florence)\\\"\";\n",
       "                var nbb_formatted_code = \"footnote = \\\"Powered by Azure Computer Vision 4 (Florence)\\\"\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "footnote = \"Powered by Azure Computer Vision 4 (Florence)\""
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3f003e83",
   "metadata": {},
   "source": [
    "### Visual Search using an image"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "id": "232c9133",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 13;\n",
       "                var nbb_unformatted_code = \"def visual_search_from_image_app(image, list_emb=list_emb, topn=3):\\n    \\\"\\\"\\\"\\n    Function for visual search using an image for the gradio app\\n    \\\"\\\"\\\"\\n    # Reference image embeddding\\n    nobackground_image = remove_background(image)\\n    image_emb = image_embedding(nobackground_image)\\n    # Comparing with all the images embeddings\\n    results_list = [\\n        get_cosine_similarity(image_emb, emb_image) for emb_image in list_emb\\n    ]\\n    # Topn results\\n    df = pd.DataFrame(list(zip(image_files, results_list)),\\n                      columns=['image_file', 'similarity'])\\n    df = df.sort_values('similarity', ascending=False)\\n    topn_list = df.nlargest(topn, 'similarity')['image_file'].tolist()\\n\\n    return topn_list\";\n",
       "                var nbb_formatted_code = \"def visual_search_from_image_app(image, list_emb=list_emb, topn=3):\\n    \\\"\\\"\\\"\\n    Function for visual search using an image for the gradio app\\n    \\\"\\\"\\\"\\n    # Reference image embeddding\\n    nobackground_image = remove_background(image)\\n    image_emb = image_embedding(nobackground_image)\\n    # Comparing with all the images embeddings\\n    results_list = [\\n        get_cosine_similarity(image_emb, emb_image) for emb_image in list_emb\\n    ]\\n    # Topn results\\n    df = pd.DataFrame(\\n        list(zip(image_files, results_list)), columns=[\\\"image_file\\\", \\\"similarity\\\"]\\n    )\\n    df = df.sort_values(\\\"similarity\\\", ascending=False)\\n    topn_list = df.nlargest(topn, \\\"similarity\\\")[\\\"image_file\\\"].tolist()\\n\\n    return topn_list\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "def visual_search_from_image_app(image, list_emb=list_emb, topn=3):\n",
    "    \"\"\"\n",
    "    Function for visual search using an image for the gradio app\n",
    "    \"\"\"\n",
    "    # Reference image embeddding\n",
    "    nobackground_image = remove_background(image)\n",
    "    image_emb = image_embedding(nobackground_image)\n",
    "    # Comparing with all the images embeddings\n",
    "    results_list = [\n",
    "        get_cosine_similarity(image_emb, emb_image) for emb_image in list_emb\n",
    "    ]\n",
    "    # Topn results\n",
    "    df = pd.DataFrame(\n",
    "        list(zip(image_files, results_list)), columns=[\"image_file\", \"similarity\"]\n",
    "    )\n",
    "    df = df.sort_values(\"similarity\", ascending=False)\n",
    "    topn_list = df.nlargest(topn, \"similarity\")[\"image_file\"].tolist()\n",
    "\n",
    "    return topn_list"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "id": "a9249c6f",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 14;\n",
       "                var nbb_unformatted_code = \"header_image = \\\"Visual Search with Azure Computer Vision (Florence) using an image\\\"\\nimages_examples = [\\n    \\\"test/test1.jpg\\\", \\\"test/test2.jpg\\\",\\n    \\\"test/test3.jpg\\\", \\\"test/test4.jpg\\\",\\n]\\n\\ntopn_list_images = [''] * 3\\nrefimage = gr.components.Image(label=\\\"Your image:\\\", type='filepath', shape=((200,200)))\\nlist_img_results_prompt = [\\n    gr.components.Image(label=f\\\"Top {i+1}: {topn_list_images[i]}\\\", type=\\\"filepath\\\", shape=((200,200)))\\n    for i in range(3)\\n]\\n\\nwebapp_image = gr.Interface(\\n    visual_search_from_image_app,\\n    refimage,\\n    list_img_results_prompt,\\n    title=header_image,\\n    examples=images_examples,\\n    theme=\\\"gstaff/sketch\\\",\\n    article=footnote,\\n)\";\n",
       "                var nbb_formatted_code = \"header_image = \\\"Visual Search with Azure Computer Vision (Florence) using an image\\\"\\nimages_examples = [\\n    \\\"test/test1.jpg\\\",\\n    \\\"test/test2.jpg\\\",\\n    \\\"test/test3.jpg\\\",\\n    \\\"test/test4.jpg\\\",\\n]\\n\\ntopn_list_images = [\\\"\\\"] * 3\\nrefimage = gr.components.Image(label=\\\"Your image:\\\", type=\\\"filepath\\\", shape=((200, 200)))\\nlist_img_results_prompt = [\\n    gr.components.Image(\\n        label=f\\\"Top {i+1}: {topn_list_images[i]}\\\", type=\\\"filepath\\\", shape=((200, 200))\\n    )\\n    for i in range(3)\\n]\\n\\nwebapp_image = gr.Interface(\\n    visual_search_from_image_app,\\n    refimage,\\n    list_img_results_prompt,\\n    title=header_image,\\n    examples=images_examples,\\n    theme=\\\"gstaff/sketch\\\",\\n    article=footnote,\\n)\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "header_image = \"Visual Search with Azure Computer Vision (Florence) using an image\"\n",
    "images_examples = [\n",
    "    \"test/test1.jpg\",\n",
    "    \"test/test2.jpg\",\n",
    "    \"test/test3.jpg\",\n",
    "    \"test/test4.jpg\",\n",
    "]\n",
    "\n",
    "topn_list_images = [\"\"] * 3\n",
    "refimage = gr.components.Image(label=\"Your image:\", type=\"filepath\", shape=((200, 200)))\n",
    "list_img_results_prompt = [\n",
    "    gr.components.Image(\n",
    "        label=f\"Top {i+1}: {topn_list_images[i]}\", type=\"filepath\", shape=((200, 200))\n",
    "    )\n",
    "    for i in range(3)\n",
    "]\n",
    "\n",
    "webapp_image = gr.Interface(\n",
    "    visual_search_from_image_app,\n",
    "    refimage,\n",
    "    list_img_results_prompt,\n",
    "    title=header_image,\n",
    "    examples=images_examples,\n",
    "    theme=\"gstaff/sketch\",\n",
    "    article=footnote,\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0519f592",
   "metadata": {},
   "source": [
    "### We can run this app"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "id": "76eb2123",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 15;\n",
       "                var nbb_unformatted_code = \"#webapp_image.launch(share=True)\";\n",
       "                var nbb_formatted_code = \"# webapp_image.launch(share=True)\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# webapp_image.launch(share=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8f665474",
   "metadata": {},
   "source": [
    "## 6. <a name=\"chapt6\"></a> Visual search using some text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "id": "6c1ca665",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 16;\n",
       "                var nbb_unformatted_code = \"def visual_search_from_prompt_app(query, list_emb=list_emb, topn=3):\\n    \\\"\\\"\\\"\\n    Function for visual search using a prompt for the gradio app\\n    \\\"\\\"\\\"\\n    # Text Embedding of the prompt\\n    text_emb = text_embedding(query)\\n    # Comparing the Text embedding with all the images embeddings\\n    results_list = [\\n        get_cosine_similarity(text_emb, emb_image) for emb_image in list_emb\\n    ]\\n    # Top5 results\\n    df = pd.DataFrame(list(zip(image_files, results_list)),\\n                      columns=['image_file', 'similarity'])\\n    df = df.sort_values('similarity', ascending=False)\\n    topn_list = df.nlargest(topn, 'similarity')['image_file'].tolist()\\n\\n    return topn_list\";\n",
       "                var nbb_formatted_code = \"def visual_search_from_prompt_app(query, list_emb=list_emb, topn=3):\\n    \\\"\\\"\\\"\\n    Function for visual search using a prompt for the gradio app\\n    \\\"\\\"\\\"\\n    # Text Embedding of the prompt\\n    text_emb = text_embedding(query)\\n    # Comparing the Text embedding with all the images embeddings\\n    results_list = [\\n        get_cosine_similarity(text_emb, emb_image) for emb_image in list_emb\\n    ]\\n    # Top5 results\\n    df = pd.DataFrame(\\n        list(zip(image_files, results_list)), columns=[\\\"image_file\\\", \\\"similarity\\\"]\\n    )\\n    df = df.sort_values(\\\"similarity\\\", ascending=False)\\n    topn_list = df.nlargest(topn, \\\"similarity\\\")[\\\"image_file\\\"].tolist()\\n\\n    return topn_list\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "def visual_search_from_prompt_app(query, list_emb=list_emb, topn=3):\n",
    "    \"\"\"\n",
    "    Function for visual search using a prompt for the gradio app\n",
    "    \"\"\"\n",
    "    # Text Embedding of the prompt\n",
    "    text_emb = text_embedding(query)\n",
    "    # Comparing the Text embedding with all the images embeddings\n",
    "    results_list = [\n",
    "        get_cosine_similarity(text_emb, emb_image) for emb_image in list_emb\n",
    "    ]\n",
    "    # Top5 results\n",
    "    df = pd.DataFrame(\n",
    "        list(zip(image_files, results_list)), columns=[\"image_file\", \"similarity\"]\n",
    "    )\n",
    "    df = df.sort_values(\"similarity\", ascending=False)\n",
    "    topn_list = df.nlargest(topn, \"similarity\")[\"image_file\"].tolist()\n",
    "\n",
    "    return topn_list"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "id": "c20c31c0",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 17;\n",
       "                var nbb_unformatted_code = \"header_prompt = \\\"Visual Search with Azure Computer Vision (Florence) using a prompt\\\"\\n\\nprompt_examples = [\\n    \\\"a red dress\\\",\\n    \\\"a red dress with long sleeves\\\",\\n    \\\"blue shirt\\\",\\n    \\\"shirt with Italian cities name\\\",\\n    \\\"Ray-Ban\\\",\\n    \\\"NYC cap\\\",\\n]\\n\\ntopn_list_prompt = [''] * 3\\nprompt = gr.components.Textbox(lines=2,\\n                               label=\\\"What do you want to search?\\\",\\n                               placeholder=\\\"Enter your prompt for the visual search...\\\",\\n                              )\\n\\nlist_img_results_image = [\\n    gr.components.Image(label=f\\\"Top {i+1}: {topn_list_prompt[i]}\\\", type=\\\"filepath\\\")\\n    for i in range(3)\\n]\\n\\nwebapp_prompt = gr.Interface(\\n    visual_search_from_prompt_app,\\n    prompt,\\n    list_img_results_image,\\n    title=header_prompt,\\n    examples=prompt_examples,\\n    theme=\\\"gstaff/sketch\\\",\\n    article=footnote,\\n)\";\n",
       "                var nbb_formatted_code = \"header_prompt = \\\"Visual Search with Azure Computer Vision (Florence) using a prompt\\\"\\n\\nprompt_examples = [\\n    \\\"a red dress\\\",\\n    \\\"a red dress with long sleeves\\\",\\n    \\\"blue shirt\\\",\\n    \\\"shirt with Italian cities name\\\",\\n    \\\"Ray-Ban\\\",\\n    \\\"NYC cap\\\",\\n]\\n\\ntopn_list_prompt = [\\\"\\\"] * 3\\nprompt = gr.components.Textbox(\\n    lines=2,\\n    label=\\\"What do you want to search?\\\",\\n    placeholder=\\\"Enter your prompt for the visual search...\\\",\\n)\\n\\nlist_img_results_image = [\\n    gr.components.Image(label=f\\\"Top {i+1}: {topn_list_prompt[i]}\\\", type=\\\"filepath\\\")\\n    for i in range(3)\\n]\\n\\nwebapp_prompt = gr.Interface(\\n    visual_search_from_prompt_app,\\n    prompt,\\n    list_img_results_image,\\n    title=header_prompt,\\n    examples=prompt_examples,\\n    theme=\\\"gstaff/sketch\\\",\\n    article=footnote,\\n)\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "header_prompt = \"Visual Search with Azure Computer Vision (Florence) using a prompt\"\n",
    "\n",
    "prompt_examples = [\n",
    "    \"a red dress\",\n",
    "    \"a red dress with long sleeves\",\n",
    "    \"blue shirt\",\n",
    "    \"shirt with Italian cities name\",\n",
    "    \"Ray-Ban\",\n",
    "    \"NYC cap\",\n",
    "]\n",
    "\n",
    "topn_list_prompt = [\"\"] * 3\n",
    "prompt = gr.components.Textbox(\n",
    "    lines=2,\n",
    "    label=\"What do you want to search?\",\n",
    "    placeholder=\"Enter your prompt for the visual search...\",\n",
    ")\n",
    "\n",
    "list_img_results_image = [\n",
    "    gr.components.Image(label=f\"Top {i+1}: {topn_list_prompt[i]}\", type=\"filepath\")\n",
    "    for i in range(3)\n",
    "]\n",
    "\n",
    "webapp_prompt = gr.Interface(\n",
    "    visual_search_from_prompt_app,\n",
    "    prompt,\n",
    "    list_img_results_image,\n",
    "    title=header_prompt,\n",
    "    examples=prompt_examples,\n",
    "    theme=\"gstaff/sketch\",\n",
    "    article=footnote,\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "916f10f9",
   "metadata": {},
   "source": [
    "### We can run this app"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "id": "99315f96",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 18;\n",
       "                var nbb_unformatted_code = \"#webapp_prompt.launch(share=True)\";\n",
       "                var nbb_formatted_code = \"# webapp_prompt.launch(share=True)\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# webapp_prompt.launch(share=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bc466fb4",
   "metadata": {},
   "source": [
    "## Unified webapp\n",
    "### We can combine the 2 apps into a single one"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "id": "bf851f35",
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/anaconda/envs/jupyter_env/lib/python3.8/site-packages/gradio/blocks.py:863: UserWarning: api_name predict already exists, using predict_1\n",
      "  warnings.warn(\n"
     ]
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Running on local URL:  http://127.0.0.1:7860\n",
      "Running on public URL: https://c59fd6302c8c0d36e6.gradio.live\n",
      "\n",
      "This share link expires in 72 hours. For free permanent hosting and GPU upgrades (NEW!), check out Spaces: https://huggingface.co/spaces\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<div><iframe src=\"https://c59fd6302c8c0d36e6.gradio.live\" width=\"100%\" height=\"500\" allow=\"autoplay; camera; microphone; clipboard-read; clipboard-write;\" frameborder=\"0\" allowfullscreen></iframe></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": []
     },
     "execution_count": 19,
     "metadata": {},
     "output_type": "execute_result"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "            setTimeout(function() {\n",
       "                var nbb_cell_id = 19;\n",
       "                var nbb_unformatted_code = \"# Combining the two gradio apps into one\\n\\nvisual_search_webapp = gr.TabbedInterface(\\n    [webapp_prompt, webapp_image],\\n    [\\n        \\\"1) Visual search from a prompt\\\", \\n        \\\"2) Visual search from an image\\\"\\n    ],\\n    css=\\\"body {background-color: black}\\\",\\n    theme=\\\"freddyaboulton/dracula_revamped\\\",  # Themes: https://huggingface.co/spaces/gradio/theme-gallery\\n)\\n\\nvisual_search_webapp.launch(share=True)\";\n",
       "                var nbb_formatted_code = \"# Combining the two gradio apps into one\\n\\nvisual_search_webapp = gr.TabbedInterface(\\n    [webapp_prompt, webapp_image],\\n    [\\\"1) Visual search from a prompt\\\", \\\"2) Visual search from an image\\\"],\\n    css=\\\"body {background-color: black}\\\",\\n    theme=\\\"freddyaboulton/dracula_revamped\\\",  # Themes: https://huggingface.co/spaces/gradio/theme-gallery\\n)\\n\\nvisual_search_webapp.launch(share=True)\";\n",
       "                var nbb_cells = Jupyter.notebook.get_cells();\n",
       "                for (var i = 0; i < nbb_cells.length; ++i) {\n",
       "                    if (nbb_cells[i].input_prompt_number == nbb_cell_id) {\n",
       "                        if (nbb_cells[i].get_text() == nbb_unformatted_code) {\n",
       "                             nbb_cells[i].set_text(nbb_formatted_code);\n",
       "                        }\n",
       "                        break;\n",
       "                    }\n",
       "                }\n",
       "            }, 500);\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Combining the two gradio apps into one\n",
    "\n",
    "visual_search_webapp = gr.TabbedInterface(\n",
    "    [webapp_prompt, webapp_image],\n",
    "    [\"1) Visual search from a prompt\", \"2) Visual search from an image\"],\n",
    "    css=\"body {background-color: black}\",\n",
    "    theme=\"freddyaboulton/dracula_revamped\",  # Themes: https://huggingface.co/spaces/gradio/theme-gallery\n",
    ")\n",
    "\n",
    "visual_search_webapp.launch(share=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1a8cac5a",
   "metadata": {},
   "source": [
    "![Image](webapp1.jpg)\n",
    "\n",
    "![Image](webapp2.jpg)\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e147aaba",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}